<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 主要内容 -->
    <main class="flex-grow flex flex-col items-center justify-center p-6 text-center">
        <div class="max-w-md w-full">
            <!-- 404 数字 -->
            <div class="text-[clamp(5rem,15vw,8rem)] font-bold text-gray-200 mb-6 relative">
                <span class="absolute inset-0 flex items-center justify-center text-[clamp(6rem,18vw,10rem)] text-gray-100 -z-10">404</span>
                <span class="text-primary">404</span>
            </div>
            
            <!-- 文本内容 -->
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-3">页面未找到</h1>
            <p class="text-gray-600 mb-8">抱歉，您访问的页面不存在或已被移除</p>
            
            <!-- 主要按钮 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
                <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-colors flex items-center justify-center gap-2">
                    <i class="fa fa-home"></i>
                    返回首页
                </a>
                <a href="#" class="bg-white border border-gray-200 hover:border-gray-300 text-gray-700 font-medium px-6 py-3 rounded-lg transition-colors flex items-center justify-center gap-2">
                    <i class="fa fa-arrow-left"></i>
                    回到上一页
                </a>
            </div>
            
            <!-- 简单搜索 -->
            <div class="bg-white p-4 rounded-lg shadow-sm">
                <form class="flex gap-2">
                    <input type="text" placeholder="搜索其他内容..." class="flex-grow px-4 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <button type="submit" class="bg-gray-100 hover:bg-gray-200 text-gray-700 p-2 rounded-md transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="py-6 px-4 text-center text-gray-500 text-sm">
        <p>© 2023 网站名称 - 保留所有权利</p>
    </footer>
</body>
</html>
